<template>
  <view class="container">
    <!-- 页面标题 -->
    <view class="header">
      <view class="title-area">
        <text class="title">学习报告</text>
        <text class="subtitle">{{currentMonth}}月学习概览</text>
      </view>
      <view class="selector">
        <picker mode="date" fields="month" :value="currentDate" @change="dateChange">
          <view class="picker-view">
            <text>{{currentMonth}}月</text>
            <uni-icons type="down" size="14" color="#666"></uni-icons>
          </view>
        </picker>
      </view>
    </view>
    
    <!-- 核心能力评估 -->
    <view class="section-card">
      <view class="card-header">
        <text class="section-title">核心能力评估</text>
        <text class="more" @click="navigateToDetail('ability')">详情 ></text>
      </view>
      <view class="ability-chart">
        <view class="charts-box">
          <qiun-data-charts 
            type="radar" 
            :opts="{
              legend:{position: 'bottom'},
              extra:{radar:{gridType:'circle'}}
            }" 
            :chartData="abilityRadarData"
          />
        </view>
      </view>
      <view class="summary-box">
        <text class="summary-text">综合能力较上月<text class="highlight">提升5%</text>，在<text class="highlight">动态规划</text>方面进步显著。</text>
      </view>
    </view>
    
    <!-- 学习分析 -->
    <view class="section-card">
      <view class="card-header">
        <text class="section-title">学习分析</text>
      </view>
      <view class="data-grid">
        <view class="data-item" v-for="(item, index) in studyAnalysis" :key="index">
          <view class="data-value">{{item.value}}</view>
          <view class="data-label">{{item.label}}</view>
          <view class="data-trend" :class="item.trend > 0 ? 'up' : (item.trend < 0 ? 'down' : '')">
            <uni-icons v-if="item.trend > 0" type="arrow-up" size="12" color="#2fc25b"></uni-icons>
            <uni-icons v-if="item.trend < 0" type="arrow-down" size="12" color="#f04864"></uni-icons>
            <text v-if="item.trend != 0">{{Math.abs(item.trend)}}%</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 练习记录 -->
    <view class="section-card">
      <view class="card-header">
        <text class="section-title">练习记录</text>
        <text class="more" @click="navigateToDetail('practice')">全部 ></text>
      </view>
      <view class="charts-box">
        <qiun-data-charts 
          type="column" 
          :opts="{
            color:['#1890FF','#91CB74'],
            extra:{column:{type:'group'}}
          }" 
          :chartData="practiceChartData"
        />
      </view>
    </view>
    
    <!-- 知识点掌握情况 -->
    <view class="section-card">
      <view class="card-header">
        <text class="section-title">知识点掌握情况</text>
        <text class="more" @click="navigateToDetail('knowledge')">详情 ></text>
      </view>
      <view class="knowledge-list">
        <view class="knowledge-item" v-for="(item, index) in knowledgePoints" :key="index">
          <view class="knowledge-info">
            <text class="knowledge-name">{{item.name}}</text>
            <text class="knowledge-count">做题{{item.count}}道</text>
          </view>
          <view class="knowledge-progress">
            <view class="progress-bar">
              <view class="progress-inner" :style="{width: item.mastery + '%', backgroundColor: getProgressColor(item.mastery)}"></view>
            </view>
            <text class="progress-text">{{item.mastery}}%</text>
          </view>
          <view class="knowledge-status" :class="getStatusClass(item.mastery)">
            {{getStatusText(item.mastery)}}
          </view>
        </view>
      </view>
    </view>
    
    <!-- 薄弱环节 -->
    <view class="section-card">
      <view class="card-header">
        <text class="section-title">薄弱环节</text>
      </view>
      <view class="weak-points">
        <view class="weak-item" v-for="(item, index) in weakPoints" :key="index">
          <view class="weak-icon">
            <uni-icons type="info-filled" size="20" color="#f04864"></uni-icons>
          </view>
          <view class="weak-content">
            <text class="weak-title">{{item.title}}</text>
            <text class="weak-desc">{{item.description}}</text>
          </view>
          <view class="weak-action">
            <text class="action-btn" @click="navigateToExercise(item)">加强练习</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 学习建议 -->
    <view class="section-card">
      <view class="card-header">
        <text class="section-title">学习建议</text>
      </view>
      <view class="suggestion-content">
        <text class="suggestion-text">{{currentSuggestion}}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentDate: '2023-10',
      currentMonth: 10,
      abilityRadarData: {
        categories: [
          "数据结构",
          "搜索算法",
          "动态规划",
          "贪心算法",
          "图论",
          "数学"
        ],
        series: [
          {
            name: "本月",
            data: [90, 80, 70, 85, 65, 75]
          },
          {
            name: "上月",
            data: [85, 75, 60, 80, 65, 70]
          }
        ]
      },
      studyAnalysis: [
        { label: "练习总数", value: "86道", trend: 15 },
        { label: "正确率", value: "75%", trend: 5 },
        { label: "学习时长", value: "32小时", trend: 10 },
        { label: "完成任务", value: "12个", trend: 0 }
      ],
      practiceChartData: {
        categories: ["第1周", "第2周", "第3周", "第4周"],
        series: [
          {
            name: "做题数",
            data: [15, 20, 25, 26]
          },
          {
            name: "正确数",
            data: [10, 15, 20, 22]
          }
        ]
      },
      knowledgePoints: [
        { name: "动态规划", count: 25, mastery: 85 },
        { name: "贪心算法", count: 18, mastery: 92 },
        { name: "图论算法", count: 15, mastery: 68 },
        { name: "数据结构", count: 20, mastery: 75 },
        { name: "数学", count: 8, mastery: 45 }
      ],
      weakPoints: [
        { 
          title: "图论最短路算法",
          description: "在Dijkstra算法的应用中出错率较高",
          id: "graph_001"
        },
        {
          title: "数学相关问题",
          description: "在概率统计类题目中正确率仅为45%",
          id: "math_002"
        }
      ],
      currentSuggestion: "根据本月学习情况，建议加强图论算法的练习，特别是最短路算法。可以参考《算法竞赛进阶指南》第5章进行学习，并完成相关章节的习题。同时，建议提高数学相关问题的解题能力，尤其是概率统计类题目。"
    };
  },
  methods: {
    navigateToDetail(type) {
      uni.navigateTo({
        url: `/pages/report/detail?type=${type}`
      });
    },
    navigateToExercise(item) {
      uni.navigateTo({
        url: `/pages/exercise/index?id=${item.id}`
      });
    },
    dateChange(e) {
      const dateStr = e.detail.value;
      this.currentDate = dateStr;
      this.currentMonth = parseInt(dateStr.split('-')[1]);
      // 这里可以请求对应月份的数据
    },
    getProgressColor(value) {
      if (value >= 80) return '#2fc25b';
      if (value >= 60) return '#1890ff';
      return '#f04864';
    },
    getStatusClass(value) {
      if (value >= 80) return 'status-good';
      if (value >= 60) return 'status-normal';
      return 'status-weak';
    },
    getStatusText(value) {
      if (value >= 80) return '掌握良好';
      if (value >= 60) return '基本掌握';
      return '需加强';
    }
  }
};
</script>

<style>
.container {
  padding: 20rpx;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0 30rpx;
}

.title-area {
  display: flex;
  flex-direction: column;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.subtitle {
  font-size: 24rpx;
  color: #666;
  margin-top: 6rpx;
}

.selector {
  background-color: #f0f0f0;
  padding: 10rpx 20rpx;
  border-radius: 30rpx;
}

.picker-view {
  display: flex;
  align-items: center;
  font-size: 26rpx;
  color: #333;
}

.picker-view text {
  margin-right: 8rpx;
}

.section-card {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
}

.more {
  font-size: 24rpx;
  color: #1890ff;
}

.charts-box {
  width: 100%;
  height: 400rpx;
}

.summary-box {
  margin-top: 20rpx;
  padding: 16rpx;
  background-color: #f8f8f8;
  border-radius: 8rpx;
}

.summary-text {
  font-size: 26rpx;
  color: #666;
  line-height: 1.5;
}

.highlight {
  color: #1890ff;
  font-weight: bold;
}

.data-grid {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10rpx;
}

.data-item {
  width: calc(50% - 20rpx);
  margin: 10rpx;
  padding: 20rpx;
  background-color: #f8f8f8;
  border-radius: 12rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.data-value {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 8rpx;
}

.data-label {
  font-size: 24rpx;
  color: #666;
}

.data-trend {
  display: flex;
  align-items: center;
  font-size: 20rpx;
  margin-top: 8rpx;
}

.up {
  color: #2fc25b;
}

.down {
  color: #f04864;
}

.knowledge-list {
  display: flex;
  flex-direction: column;
}

.knowledge-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.knowledge-info {
  width: 30%;
  display: flex;
  flex-direction: column;
}

.knowledge-name {
  font-size: 26rpx;
  color: #333;
  margin-bottom: 6rpx;
}

.knowledge-count {
  font-size: 22rpx;
  color: #999;
}

.knowledge-progress {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 0 20rpx;
}

.progress-bar {
  flex: 1;
  height: 14rpx;
  background-color: #f0f0f0;
  border-radius: 7rpx;
  overflow: hidden;
}

.progress-inner {
  height: 100%;
  border-radius: 7rpx;
}

.progress-text {
  font-size: 22rpx;
  color: #666;
  margin-left: 10rpx;
  width: 50rpx;
  text-align: right;
}

.knowledge-status {
  width: 18%;
  font-size: 24rpx;
  text-align: center;
  padding: 6rpx 10rpx;
  border-radius: 20rpx;
}

.status-good {
  color: #2fc25b;
  background-color: rgba(47, 194, 91, 0.1);
}

.status-normal {
  color: #1890ff;
  background-color: rgba(24, 144, 255, 0.1);
}

.status-weak {
  color: #f04864;
  background-color: rgba(240, 72, 100, 0.1);
}

.weak-points {
  display: flex;
  flex-direction: column;
}

.weak-item {
  display: flex;
  align-items: center;
  padding: 16rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.weak-icon {
  margin-right: 16rpx;
}

.weak-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.weak-title {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 6rpx;
}

.weak-desc {
  font-size: 24rpx;
  color: #666;
  line-height: 1.4;
}

.weak-action {
  margin-left: 16rpx;
}

.action-btn {
  font-size: 24rpx;
  color: #1890ff;
  background-color: rgba(24, 144, 255, 0.1);
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
}

.suggestion-content {
  padding: 20rpx;
  background-color: #f8f8f8;
  border-radius: 12rpx;
}

.suggestion-text {
  font-size: 26rpx;
  color: #333;
  line-height: 1.6;
}
</style> 